
<!--  -->
<template>

  <div class="about">
    <h1>This is an about page11</h1>
    <ul id="journals">
      <li>{{updateTime}} {{ip}} {{alarmType}}</li>
      <li>2020-05-05 09:13 操作系统 启动失败</li>
      <li>2020-05-05 09:13 操作系统 启动失败</li>
      <li style=color:red>2020-05-05 09:13 操作系统 启动失败</li>
    </ul>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      res: [
        { updateTime: "1586252933495", ip: "113.81.235.4", alarmType: "爆炸" },
        {
          updateTime: "1586252963495",
          ip: "123.456.789.33",
          alarmType: "哈哈哈1",
        },
        {
          updateTime: "1586252963495",
          ip: "123.456.789.33",
          alarmType: "哇哇哇2",
        },
        {
          updateTime: "1586252963495",
          ip: "123.456.789.33",
          alarmType: "啦啦啦3",
        },
      ],
      updateTime: "updateTime",
      ip: "ip",
      alarmType: "alarmType",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    socketxxx() {
      // this.socket.emit("identify", { id: "1515" }, (res) => {
      //   console.log("idenres", id, res);
      // });
      // this.socket.emit("identify", { id: "666" });
      // console.log(this.res);
      this.res.forEach((item) => {
        this.journals = item;
        let UL = document.getElementById("journals");
        var LI = document.createElement("li");
        LI.innerHTML = `<li style=color:pink>${this.journals.updateTime} ${this.journals.ip} ${this.journals.alarmType}</li>`;
        UL.appendChild(LI);
      });

      function formatDate(value) {
        if (typeof value == "undefined") {
          return "";
        } else {
          let date = new Date(parseInt(value));
          let y = date.getFullYear();
          let MM = date.getMonth() + 1;
          MM = MM < 10 ? "0" + MM : MM;
          let d = date.getDate();
          d = d < 10 ? "0" + d : d;
          let h = date.getHours();
          h = h < 10 ? "0" + h : h;
          let m = date.getMinutes();
          m = m < 10 ? "0" + m : m;
          let s = date.getSeconds();
          s = s < 10 ? "0" + s : s;
          return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        }
      }
      formatDate("1586252933495");
      console.log(formatDate("1586252933495"));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.socketxxx();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.licolor {
  color: red;
}
</style>
